<template>
  <div>
    <ul>  
      <li v-for="obj in arr" :key="obj.id">
        <span>{{ obj.name }}</span>
        ---
        <input type="text">
      </li>
    </ul>

    <button @click="changeFn">交换下标1和2元素的位置</button>
    <button @click="addFn">从中间新增1个</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          name: "小明",
          id: 100,
        },
        {
          name: "老王",
          id: 194,
        },
        {
          name: "老秦",
          id: 239,
        },
        {
          name: "老李",
          id: 15,
        },
        {
          name: "老赵",
          id: 27,
        },
      ],
    };
  },
  methods: {
    changeFn(){
      let temp = this.arr[1];
      this.$set(this.arr, 1, this.arr[2]);
      this.$set(this.arr, 2, temp);
    },
    addFn(){
      this.arr.splice(2, 0, {
        name: "新来的",
        id: 9999
      })
    }
  }
};

</script>

<style>
</style>